<template>
	<div class="history flex-page-wrapper">
		<uni-nav-bar statusBar color="" backgroundColor="#fff" :title="$t('login.history.b2o73n')">
		</uni-nav-bar>
		<div class="flex-page">
			<!-- <h3>{{ $t('login.history.b2o73n') }}</h3> -->
			<h4>{{ $t('login.history.1x1s2v') }}</h4>
			<div class="history-item">
				<div class="title"><span>*</span>{{ $t('login.history.ot0e2w') }}</div>
				<div class="text">
					{{ name }}
				</div>
			</div>
			<div class="history-item">
				<div class="title"><span>*</span>{{ certObj[identityType]['label' + En] }}</div>
				<div class="text">
					{{ identityCard }}
					<uni-easyinput :controls="false" v-model="num1" :focus="number1Focus" @input="v => numberChange(v, 'number2Focus', 'num1')" :clearable="false"></uni-easyinput>
					<uni-easyinput :controls="false" v-model="num2" :focus="number2Focus" @input="v => numberChange(v, 'number3Focus', 'num2')" :clearable="false"></uni-easyinput>
					<uni-easyinput :controls="false" v-model="num3" :focus="number3Focus" @input="v => numberChange(v, 'number4Focus', 'num3')" :clearable="false"></uni-easyinput>
					<uni-easyinput :controls="false" v-model="num4" :focus="number4Focus" @input="v => numberChange(v, null, 'num4')" :clearable="false"></uni-easyinput>
				</div>
			</div>
		</div>
		<div class="btns">
			<div class="btn active" @click="submit">{{ $t('login.history.646utw') }}</div>
			<div class="btn" @click="toRegister">{{ $t('login.history.l2l50y') }}</div>
		</div>
	</div>
</template>

<script>
	import protal from "@/api/protal"

	const certObj = {
		identity_card: {
			"uuid": "55b0b010337c11efb6260242ac110003",
			"sts": 0,
			"createdTime": "2024-06-26 13:24:17",
			"lastUpdatedTime": "2024-06-26 13:24:17",
			"createdBy": null,
			"lastUpdatedBy": null,
			"dictLabel": "身份证验证",
			"dictValue": "identity_card",
			"dictSort": 1,
			"dictType": "cert",
			"defaultTag": 1,
			"status": 0,
			"tag": 1,
			"tenantUuid": "46e8fb46ee4e4193940b26517a88fd55",
			"remark": "",
			"dictLabelEn": "Identity Card",
			"label": "身份证验证",
			"labelEn": "Verification of Identity Card",
			"value": "identity_card"
		},
		foreigners_identity_card: {
			"uuid": "55b0c159337c11efb6260242ac110003",
			"sts": 0,
			"createdTime": "2024-06-26 13:24:17",
			"lastUpdatedTime": "2024-06-26 13:24:17",
			"createdBy": null,
			"lastUpdatedBy": null,
			"dictLabel": "外国人永久居留身份证验证",
			"dictValue": "foreigners_identity_card",
			"dictSort": 2,
			"dictType": "cert",
			"defaultTag": 1,
			"status": 0,
			"tag": 1,
			"tenantUuid": "46e8fb46ee4e4193940b26517a88fd55",
			"remark": "",
			"dictLabelEn": "Foreign Permanent Resident ID Card",
			"label": "外国人永久居留身份证验证",
			"labelEn": "Verification of China's Permanent Residence Permit for Foreigners",
			"value": "foreigners_identity_card"
		},
		passport: {
			"uuid": "55b0b64a337c11efb6260242ac110003",
			"sts": 0,
			"createdTime": "2024-06-26 13:24:17",
			"lastUpdatedTime": "2024-06-26 13:24:17",
			"createdBy": null,
			"lastUpdatedBy": null,
			"dictLabel": "护照验证",
			"dictValue": "passport",
			"dictSort": 3,
			"dictType": "cert",
			"defaultTag": 1,
			"status": 0,
			"tag": 1,
			"tenantUuid": "46e8fb46ee4e4193940b26517a88fd55",
			"remark": "",
			"dictLabelEn": "Passport",
			"label": "护照验证",
			"labelEn": "Passport Authentication",
			"value": "passport"
		},
		taiwan_pass: {
			"uuid": "55b0ba5d337c11efb6260242ac110003",
			"sts": 0,
			"createdTime": "2024-06-26 13:24:17",
			"lastUpdatedTime": "2024-06-26 13:24:17",
			"createdBy": null,
			"lastUpdatedBy": null,
			"dictLabel": "台湾居民来往大陆通行证验证",
			"dictValue": "taiwan_pass",
			"dictSort": 4,
			"dictType": "cert",
			"defaultTag": 1,
			"status": 0,
			"tag": 1,
			"tenantUuid": "46e8fb46ee4e4193940b26517a88fd55",
			"remark": "",
			"dictLabelEn": "Taiwan Pass",
			"label": "台湾居民来往大陆通行证验证",
			"labelEn": "Verification of Mainland Travel Permit for Taiwan Compatriots",
			"value": "taiwan_pass"
		},
		hong_kong_Macao_Pass: {
			"uuid": "55b0b522337c11efb6260242ac110003",
			"sts": 0,
			"createdTime": "2024-06-26 13:24:17",
			"lastUpdatedTime": "2024-06-26 13:24:17",
			"createdBy": null,
			"lastUpdatedBy": null,
			"dictLabel": "港澳居民来往内地通行证验证",
			"dictValue": "hong_kong_Macao_Pass",
			"dictSort": 5,
			"dictType": "cert",
			"defaultTag": 1,
			"status": 0,
			"tag": 1,
			"tenantUuid": "46e8fb46ee4e4193940b26517a88fd55",
			"remark": "",
			"dictLabelEn": "Hong Kong and Macao Pass",
			"label": "港澳居民来往内地通行证验证",
			"labelEn": "Verification of the Mainland Travel Permit for Hong Kong and Macao Residents",
			"value": "hong_kong_Macao_Pass"
		}
	}

	export default {
		data() {
			return {
				num1: undefined,
				num2: undefined,
				num3: undefined,
				num4: undefined,
				number1Focus: false,
				number2Focus: false,
				number3Focus: false,
				number4Focus: false,
				certObj,
				name: '',
				identityType: '',
				identityCard: '',
				phone: '',
				phoneCnyCode: '',
				authCode: '',
				inviteCode: ''
			}
		},
		onLoad(query) {
			this.name = query.name
			this.identityType = query.identityType
			this.identityCard = query.identityCard
			this.phone = query.phone
			this.phoneCnyCode = query.phoneCnyCode
			this.authCode = query.authCode
			this.inviteCode = query.inviteCode
		},
		methods: {
			submit() {
				if (!(this.num1 && this.num2 && this.num3 && this.num4)) {
					uni.showToast({
						icon: 'error',
						title: this.$t('login.history.v56c1j')
					})
					return
				}
				const params = {
					authCode: this.authCode,
					identityCardLastFour: '' + this.num1 + this.num2 + this.num3 + this.num4
				}
				let str = 'gwCheckIdentityCard'
				if (this.inviteCode) {
					str = 'invitationcheckIdentityCard'
				}
				protal[str](params).then(res => {
					if (res.code === '0000') {
						uni.setStorageSync('validateData', JSON.stringify(res.data))
						uni.navigateTo({
							url: `/pages/login/register?identityType=${ this.identityType }&identityCard=${ this.identityCard }&phone=${ this.phone }&phoneCnyCode=${ this.phoneCnyCode }&authCode=${ this.authCode }&inviteCode=${ this.inviteCode }`
						})
					}
				})
			},
			toRegister() {
				uni.navigateTo({
					url: `/pages/login/real?phone=${ this.phone }&phoneCnyCode=${ this.phoneCnyCode }&authCode=${ this.authCode }&inviteCode=${ this.inviteCode }`
				})
			},
			numberChange(v, str, num) {
				console.log(v, 999)
				if (v || v == 0) {
					if (!/[a-zA-Z0-9]/.test(v)) {
						this[num] = ''
						return
					}
					if (str) {
						this.number2Focus = false
						this.number3Focus = false
						this.number4Focus = false
						this.$nextTick(() => {
							this[str] = true
						})
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.history {
		display: flex;
		flex-direction: column;
		min-height: 100vh;

		.flex-page {
			flex: 1;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
		}

		h3 {
			font-family: AlibabaPuHuiTi_3_75_SemiBold;
			font-size: 48rpx;
			color: #000000;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
		}

		h4 {
			font-family: AlibabaPuHuiTi_3_55_Regular;
			font-size: 28rpx;
			color: #656565;
			line-height: 36rpx;
			font-weight: normal;
			text-align: center;
			font-style: normal;
			padding: 0 30rpx;
			margin: 20rpx 0 80rpx;
		}

		/deep/ .uni-easyinput {
			flex: 1;
			height: 44px;
			margin-left: 6px;

			.uni-easyinput__content {

				.uni-easyinput__content-input {
					width: 100%;
					height: 44px;
					margin-left: 0 !important;
					padding: 0 !important;
					font-size: 40rpx;
					text-align: center;
				}
			}
		}


		.history-item {
			padding: 0 40rpx;
			margin-bottom: 68rpx;

			.title {
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 30rpx;
				color: #181818;
				line-height: 30rpx;
				font-style: normal;
				display: flex;

				span {
					color: #FF0000;
				}
			}

			.text {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 40rpx;
				color: #676767;
				line-height: 40rpx;
				font-style: normal;
				margin-top: 32rpx;
				display: flex;
				align-items: center;
			}

			/deep/ .el-input {
				padding: 0;
				margin-left: 12rpx;

				.el-input__inner {
					padding: 0;
					height: 88rpx;
					text-align: center;
					color: #000;
				}
			}
		}

		.btns {
			padding-bottom: calc(env(safe-area-inset-bottom) + 20px);

			.btn {
				width: 638rpx;
				height: 88rpx;
				background: rgba(0, 0, 50, 0.1);
				border-radius: 44rpx;
				margin: 28rpx auto 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: AlibabaPuHuiTi_2_65_Medium;
				font-size: 32rpx;
				color: #000000;
				line-height: 40rpx;
				font-style: normal;

				&.active {
					background: #784DFF;
					color: #fff;
				}
			}
		}
	}
</style>